<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var xAxisData = [],	//x轴上的数据
			data1 = [],
			data2 = [],
			data3 = [],
			data4 = [];

		for (var i = 0; i < 10; i++) {
			xAxisData.push('Class' + i);
			data1.push((Math.random() * 2).toFixed(2));
			data2.push(-(Math.random()).toFixed(2));
			data3.push((Math.random() * 5).toFixed(2));
			data4.push((Math.random() + 0.3).toFixed(2));
		}

		var myChart = echarts.init(document.getElementById('chart'));
		myChart.setOption({
			legend: {
				left: 'left',
			},
			xAxis: {
				data: xAxisData,
				name: 'X 轴',
			},
			yAxis: {
				inverse: true,	//让数据倒过来
			},
			grid: {
				left: 100,
			},
			tooltip: {},
			visualMap: {
				type: 'continuous',
				text: ['Hight', 'Low'],
				inverse: true,
				top: 60,
				left: 10,
				calculable: true,
				itemHeight: 200,
				min: -2,
				max: 6,
				inRange: {
					colorLightness: [0.4, 0.8],
				},
				outOfRange: {
					color: '#bbb',
				},
				controller: {
					inRange: {
						color: '#2f4554'
					}
				}
			},
			dataZoom: {
				type: 'inside',
			},
			/* toolbox:{
				feature:{
					brush: ['rect', 'polygon', 'lineX','lineY', 'keep','clear'],
				}
			}, */
			brush: {
				//toolbox:['rect', 'polygon', 'lineX','lineY', 'keep','clear'],
				//seriesIndex:[0,1],
				xAxisIndex: 0,	//根据轴找到它所在的坐标系，brush在这个坐标系内生效
				brushType: 'lineX',
				brushMode: 'single',
				transformable: false,
				brushStyle: {
					borderWidth: 2,
					color: 'rgba(0,0,0,0.3)',
					borderColor: 'rgba(0,0,0,0.5)'
				},
				throttleType:'debounce',
				throttleDelay:1000,
				removeOnClick:false,

				inBrush:{
					color:'#bbb',
				},
				outOfBrush:{
					opacity:0.1
				}
			},
			series: [
				{
					name: 'bar1',
					type: 'bar',
					stack: 'one',
					data: data1,
				},
				{
					name: 'bar2',
					type: 'bar',
					stack: 'one',
					data: data2,
				},
				{
					name: 'bar3',
					type: 'bar',
					stack: 'two',
					data: data3,
				},
				{
					name: 'bar4',
					type: 'bar',
					stack: 'two',
					data: data4,
				}
			]
		});

		myChart.on('brushSelected',function(params){
			console.log(params);
			var brushed=[];		//存储选中的数据对应的索引
			var selected=params.batch[0].selected;	//选中的所有系列

			for(var i=0;i<selected.length;i++){
				var dataIndex=selected[i].dataIndex;
				brushed.push('[Series '+i+'] '+dataIndex.join(', '));
			}

			//console.log(brushed);

			myChart.setOption({
				title:{
					backgroundColor:'#333',
					text:'选中数据的索引：\n'+brushed.join('\n'),
					bottom:0,
					right:0,
					width:100,
					textStyle:{
						fontSize:12,
						color:'#fff'
					}
				}
			});
		});
	</script>
</body>

</html>
